<!-- 个人中心 -->
<template>
    <div class='fullW'>
        <el-container class="mt-12px">
            <el-aside class="aside mr-12px" width="220px">
                <div class="use-menu pa-10px">
                    
                    <ul>
                        <li :class="{'active':active.includes(item.name)}" v-for="(item, index) in menuData" :key="index"
                            @click="to(item.path)">
                            <i :class="item.icon"></i><span>{{ item.title }}</span>
                        </li>
                    </ul>
                </div>
            </el-aside>
            <div class="main">
                <NuxtPage />
            </div>
        </el-container>
    </div>
</template>

<script setup>
let route = useRoute();

const active = ref('personal')
const menuData = [
    {
        path: '/user/need',
        name: 'user-need',
        title:'需求提请表',
        icon: 'iconfont icon-a-demandschedule'
    }, {
        path: '/user/record',
        name: 'user-record',
        title:'承接记录',
        icon: 'iconfont icon-record'
    }, {
        path: '/user/personal',
        name: 'user-personal',
        title:'个人中心',
        icon: 'iconfont icon-personal'
    }
]
const to = (path) => {
    navigateTo(path)
}

watch(() => route.matched, (newVal, oldVal) => {
    active.value = newVal[newVal.length - 1].name
},
    { immediate: true }
)
</script>
<style scoped lang='scss'>
.aside {
    background-color: #fff;
    border-radius: 8px;
    height: 740px;

    .use-menu {
        li+li{margin-top: 8px;}
        li {
            height: 50px;
            display: flex;
            align-items: center;
            color: var(--use-color-info-light-3);
            border-radius: 6px;
            cursor: pointer;
            padding: 0 20px;

            &:hover,
            &.active {
                background-color: var(--use-color-primary);
                color: var(--use-color-info);

                span {
                    font-weight: bold;
                }
            }

            .iconfont {
                margin-right: 16px;
                font-size: 20px;
            }
        }
    }
}

.main{
    width: 100%;
}
</style>
